<script setup>
import axios from "axios";
import {ref} from 'vue'
import {useRouter} from "vue-router";
import {KingTrans} from "@/language/translate.js";
import GlobalConfig from "./GlobalParams.js";

let user_name_txt=ref("")
let password_txt=ref("")


let router=useRouter()

function login(){
  let paras = {}
  paras.user_name = user_name_txt.value
  paras.password = password_txt.value
  axios.post("http://localhost:8080/users/checkUser", paras).then((res) => {
    console.log(res)
    if(res.data !== ""){
      localStorage.setItem("real_name", res.data.realName)
      localStorage.setItem("user_name", res.data.userName)
      localStorage.setItem("userId", res.data.tableKey)
      router.push("/MainFrame")
    }
    else {
      alert("用户名或密码不正确")
    }
  })
}
</script>

<template style="height: 100%">
  <div class="whiteBlock">

  </div>
  <div class="bg">

  </div>

  <div class="loginBox" style="background:white;opacity: 0.5">

  </div>
  <div class="loginBox" style="z-index: 30">
    <div class="systemTitle">
      {{KingTrans("多用户在线记账系统",GlobalConfig.lang)}}
      <span style="color: red">V1.0</span>
    </div>

    <div class="loginBoxInput">
      <div>
        用户名：
      </div>
      <div style="margin-top: 15px">
        <input type="text" class="inputStyle" :placeholder="KingTrans('请输入用户名',GlobalConfig.lang)" v-model="user_name_txt">

      </div>

      <div style="margin-top: 15px" >
        密码
        ：
      </div>
      <div style="margin-top: 15px">
        <input type="password" class="inputStyle" :placeholder="KingTrans('请输入密码',GlobalConfig.lang)" v-model="password_txt">
      </div>

      <input type="button" id="btn" :value="KingTrans('点击登陆',GlobalConfig.lang)"@click="login">

      <div id="copyright">
        版权所有：xxxxxx<br>
        联系人：xxxx, 13888888888
      </div>

    </div>

  </div>
</template>

<style scoped>
#copyright{
  font-family: "Times New Roman";
  font-weight: normal;
  line-height: 130%;
  margin-top: 5px;
}
#btn{
  background: #147314;
  height: 30px;
  line-height: 30px;
  text-align: center;
  width: 90%;
  border:0;
  color: #ffffff;
  letter-spacing: 2px;
  margin-top: 15px;
}
.inputStyle {
  height: 25px;
  font-size: 10pt;
  width:85%
}

.loginBoxInput {
  padding: 10px 0 0 10px;

}

.systemTitle {
  font-size: 13pt;
  font-family: "Times New Roman", 黑体;
  color: #0e558f;
  font-weight: bold;
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
  border-bottom: 2px solid #0e558f;
}

.bg {
  height: 100%;
  width: 100%;
  background-image: url("@/assets/2.jpg");
  position: absolute;
  z-index: 5;

}

.whiteBlock {
  background: #fff;
  width: 100%;
  height: 260px;
  position: absolute;
  z-index: 10;
  opacity: 0.5;
  top: 50%;
  margin-top: -130px;
}

.loginBox {
  width: 300px;
  height: 360px;

  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -180px;
  z-index: 20;
  border-radius: 5px;
}
</style>